<template>
  <div class="limitSale_container">
    <el-form :model="form" inline>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="商品编号" prop="identifier">
        <el-input v-model="form.identifier" placeholder="请输入商品编号" clearable />
      </el-form-item>
      <el-form-item label="限销类型" prop="type">
        <el-select v-model="form.type" placeholder="限销类型,精准匹配" clearable style="width: 200px">
          <el-option v-for="dict in dict.type.control_sale_type" :key="dict.value"
            :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  -->
    <el-button class="newlyBuild" type="success" @click="newlyBuild" v-hasPermi="['control:sale:add']">新建</el-button>
    <el-button class="newlyBuild" type="danger" @click="deleteSelect" :disabled="multiple" v-hasPermi="['control:sale:remove']">删除</el-button>
    <el-button class="newlyBuild" type="success" @click="Import" v-hasPermi="['control:sale:import']">导入</el-button>
    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['control:sale:export']">导出</el-button>

    <!-- 列表 -->
    <el-table border :data="limitSaleList" v-loading="loading"
      @selection-change="handleSelectionChange2">
      <el-table-column type="index" label="序号" align="center" width="80px"> </el-table-column>
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="商品编号" prop="identifier" align="center" width="80">
      </el-table-column>
      <el-table-column label="商品名称" prop="goodsName" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="生产厂家" prop="manufacturer" align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="规格" prop="simpleSpecs" align="center" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column label="黑/白名单" prop="type" align="center" :show-overflow-tooltip="true"
        width="80">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.type" class="switchStyle" active-text="白" inactive-text="黑"
            active-value="RELEASE" inactive-value="PREVENT"
            @change="handleTypeChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="客户" align="center" :show-overflow-tooltip="true">
        <!-- <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.controlSaleVOList[0].purchaserList" :key="index">
            {{item.name}}
          </el-tag>
        </template> -->
        <template slot-scope="scope" v-if="scope.row.purchaserIds">
          <el-button size="mini" @click="getPurchaserList(scope.row)">查看
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="限销区域" align="center" :show-overflow-tooltip="true">
        <!-- <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.controlSaleVOList[0].regionList" :key="index">
            {{item.name}}
          </el-tag>
        </template> -->
        <template slot-scope="scope" v-if="scope.row.regions">
          <el-button size="mini" @click="getPurchaserList(scope.row)">查看
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="客户类型" align="center" :show-overflow-tooltip="true">
        <!-- <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.controlSaleVOList[0].moldList" :key="index">
            {{item.name}}
          </el-tag>
        </template> -->
        <template slot-scope="scope" v-if="scope.row.molds">
          <el-button size="mini" @click="getPurchaserList(scope.row)">查看
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="450px">
        <template slot-scope="scope">
          <el-button size="mini" @click="purchaser(scope.row)" v-hasPermi="['control:sale:edit']">客户</el-button>
          <el-button size="mini" @click="purchaserType(scope.row)" v-hasPermi="['control:sale:edit']">客户类型</el-button>
          <el-button size="mini" @click="limitSaleRegion(scope.row)" v-hasPermi="['control:sale:edit']">限销区域</el-button>
          <el-button size="mini" @click="regionOrType(scope.row)" v-hasPermi="['control:sale:edit']">区域&类型</el-button>
          <el-button size="mini" @click="delLimitSaleRow(scope.row)" v-hasPermi="['control:sale:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="parseInt(form.total) > 0" :total="parseInt(form.total)"
      :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getList" />

    <!-- 新建  -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="title"
      :visible.sync="dialogVisible1" width="60%">
      <div class="search">
        商品编号：<el-input v-model="goodsForm.identifier"></el-input>
        商品名称：<el-input v-model="goodsForm.goodsName"></el-input>
        <el-button type="primary" @click="goods_search">搜索</el-button>
      </div>
      <el-table border :data="goodsList">
        <el-table-column label="商品编号" prop="identifier" width="100px"> </el-table-column>
        <el-table-column label="商品名称" prop="goodsName" align="center"> </el-table-column>
        <el-table-column label="生产厂家" prop="manufacturer" align="center"> </el-table-column>
        <el-table-column label="规格" prop="simpleSpecs" align="center" width="130px">
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button size="mini" @click="add(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="parseInt(goodsForm.total) >0" :total="parseInt(goodsForm.total)"
        :page.sync="goodsForm.pageNum" :limit.sync="goodsForm.pageSize"
        @pagination="goods_search" />
    </el-dialog>

    <!-- 导入 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="upload.title"
      :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="r + '/control/sale/importData?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
          </div> -->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false"
            style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 客户 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="title"
      :visible.sync="dialogVisible2" width="50%">

      <div class="search">
        客户名称：
        <el-input v-model="purchaserForm.purchaserName"></el-input>
        客户编号：
        <el-input v-model="purchaserForm.businessCode"></el-input>
        <el-button type="primary" @click="purchaser_search">搜索</el-button>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="primary" @click="toggleSelection">取消选中</el-button>
      </div>

      <div class="purchaserIdsName">
        <el-tag v-for="(item,index) in purchaserIds" :key="index"> {{item.name}} </el-tag>
      </div>

      <el-table border ref="multipleTable" :data="purchaserList" @select-all='selects_all'
        :row-key="getRowKeys" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="客户名称" prop="purchaserName" align="center"> </el-table-column>
        <el-table-column label="客户编号" prop="businessCode" align="center" width="150px">
        </el-table-column>
        <el-table-column label="采购员姓名" prop="memberName" align="center" width="100px">
        </el-table-column>
        <el-table-column label="客户类型" prop="mold" align="center" width="100px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.purchaser_certified_mold" :value="scope.row.mold" />
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="applyStatus" align="center" width="100px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.purchaser_apply_status" :value="scope.row.applyStatus" />
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" width="80px">
          <template slot-scope="scope">
            <el-button size="mini" @click="add(scope.row)">添加</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <pagination v-show="parseInt(purchaserForm.total) >0" :total="parseInt(purchaserForm.total)"
        :page.sync="purchaserForm.pageNum" :limit.sync="purchaserForm.pageSize"
        @pagination="purchaser_search" />
    </el-dialog>

    <!-- 客户类型-->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="title"
      :visible.sync="dialogVisible3" width="20%">
      <!-- <p class="purchaser_certified_mold" v-for="(item,index) in dict.type.purchaser_certified_mold"
        :key="index">
        {{item.label}}
        <el-button size="mini" @click="add(item)">设置</el-button>
      </p> -->
      <el-cascader ref="cascader1" v-model="checkedNodes1"
        :options="dict.type.purchaser_certified_mold" :props="{ multiple: true }" filterable
        @change="getChecked1">
      </el-cascader>
      <el-button size="mini" @click="add">设置</el-button>
    </el-dialog>

    <!-- 限销区域-->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="title"
      :visible.sync="dialogVisible4" width="30%">
      <!-- <treeselect v-model="administrative.parentId" :options="list" />  -->
      <!-- <el-tree ref="tree" :data="list" :props="defaultProps" @node-click="handleNodeClick">      </el-tree> -->
      <el-cascader ref="cascader" v-model="checkedNodes" :options="list" :props="props"
        collapse-tags clearable @change="getChecked"></el-cascader>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="add">设置</el-button>
      </span>
    </el-dialog>

    <!-- 区域和类型 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="title"
      :visible.sync="dialogVisible5" width="30%">
      <div style="margin:20px 0"> 区域：
        <el-cascader ref="cascader" v-model="checkedNodes" :options="list" :props="props"
          collapse-tags clearable @change="getChecked">
        </el-cascader>
      </div>

      <div style="margin:20px 0"> 类型：
        <el-cascader ref="cascader1" v-model="checkedNodes1"
          :options="dict.type.purchaser_certified_mold" :props="{ multiple: true }" filterable
          @change="getChecked1">
        </el-cascader>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="add">设置</el-button>
      </span>
    </el-dialog>

    <!-- 确认框 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag title="提示" :visible.sync="open"
      width="400px">
      <p> 确认删除吗？ </p>
      <el-button @click="open = false">取消</el-button>
      <el-button @click="determineDelete">确定</el-button>
    </el-dialog>

    <!-- 查看列表 客户 区域 客户类型 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag title="查看" :visible.sync="open1"
      width="60%">
      <el-button size="mini" @click="deleteSelected"> 删除选中 </el-button>
      <el-table border :data="seeAllControlCondition" @selection-change="handleSelectionChange3">
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column prop="purchaser" label="客户" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="region" label="限销区域" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="mold" label="客户类型" align="center" width="250px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.purchaser_certified_mold" :value="scope.row.mold"
              class="moldStyle" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="UpdatePurchaser(scope.row)" v-if="scope.row.purchaser">
              修改客户 </el-button>
            <el-button size="mini" @click="UpdatePurchaserType(scope.row)" v-if="scope.row.mold">
              修改类型</el-button>
            <el-button size="mini" @click="UpdateLimitSaleRegion(scope.row)"
              v-if="scope.row.region"> 修改区域</el-button>
            <el-button size="mini" @click="UpdateRegionOrType(scope.row)"
              v-if="scope.row.region && scope.row.mold"> 修改区域&类型</el-button>
            <el-button size="mini" @click="deleteInfoItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLimitSaleList, allGoodsList, allPurchaserList, addLimitSale, updLimitSale, delLimitSale, getLimitItem,
  administrativeDivision, updateType
} from '@/api/limitSale/index'
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { getToken } from "@/utils/auth"

export default {
  name: 'SkuSale',
  components: { Treeselect },
  dicts: ["control_sale_type", "purchaser_certified_mold"],
  data () {
    return {
      r: process.env.VUE_APP_BASE_API,
      loading: true,
      loading1: false,
      title: '',
      ids: '',
      // 列表
      form: {
        total: '',
        pageNum: 1,
        pageSize: 10,
      },
      limitSaleList: [],
      // 商品
      goodsForm: {
        total: '',
        pageNum: 1,
        pageSize: 10,
        goodsName: '',
      },
      goodsList: [],
      dialogVisible1: false,
      // 客户
      purchaserForm: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        paramMap: { applyStatus: 'EXPIRE,PASS' },
      },
      purchaserList: [],
      purchaserIds: [],
      dialogVisible2: false,

      getRowKeys (row) {
        return row.username;
      },

      // 客户类型
      purchaserTypeContent: '',
      dialogVisible3: false,
      // 区域
      administrative: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      province: -1,
      city: -1,
      district: -1,
      dialogVisible4: false,
      // 行
      ROW: '',
      //  行政区域
      list: [],
      open: false,
      checkedNodes: [],
      checkedNodes1: [],
      props: {
        multiple: true,
        children: 'children',
        value: 'id',
        label: 'name',
        checkStrictly: true,
        emitPath: true
      },
      // 区域和类型
      regionType: {},
      dialogVisible5: false,
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() }
      },
      // 查看列表 客户 区域 客户类型
      getListItem: [],
      getListItemId: 0,
      open1: false,
      multiple: true,
      skuIds: [],
      seeAllControlCondition: [],
      currentRow:undefined,
    }
  },
  created () {
    this.getList()
    administrativeDivision().then(res => {
      this.list = this.handleTree(res.data, 'id')[0].children
    })
  },
  methods: {
    // 查看列表 客户 区域 客户类型
    getPurchaserList (row) {
      this.getListItem = []
      this.seeAllControlCondition = []
      this.open1 = true
      this.rowSkuId = row.skuId
      this.getRowItemInfo()
      this.currentRow = row
    },

    getRowItemInfo () {
      getLimitItem(this.rowSkuId).then(res => {
        if (res.code === 200) {
          let mold = ""
          let purchaser = ""
          let region = ""

          res.data.controlSaleVOList.forEach(i => {
            // 客户类型
            // if (i.moldList) {
            //   let label = []
            //   i.moldList.forEach(j => {
            //     label.push(j.name)
            //   })
            //   mold = label + ''
            // }

            if (i.molds) {
              mold = i.molds.split(',')
            }

            // 客户
            if (i.purchaserList) {
              let label = []
              i.purchaserList.forEach(j => {
                label.push(j.name)
              })
              purchaser = label + ''
            }
            // 限销区域
            if (i.regionList) {
              let label = []
              i.regionList.forEach(j => {
                label.push(j.name)
                if (j.children.length) {
                  label.push(j.children[0].name)
                  if (j.children[0].children.length) {
                    label.push(j.children[0].children[0].name + ';')
                  } else {
                    label.push(';')
                  }
                } else {
                  label.push(';')
                }
              })
              region = label.join('')
            }
          })
          this.seeAllControlCondition = [{ mold: mold, purchaser: purchaser, region: region }]
          console.log(this.seeAllControlCondition)
        }
      })
    },

    // 修改客户
    UpdatePurchaser (row) {
      this.ROW = row
      this.purchaserIds = []
      // 客户
      this.purchaserForm = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        paramMap: { applyStatus: 'EXPIRE,PASS' },
      }
      this.checkedNodes = []
      this.title = '修改客户'
      this.purchaserList = []
      this.dialogVisible2 = true
    },
    // 修改客户类型
    UpdatePurchaserType (row) {
      this.ROW = row
      this.title = '修改客户类型'
      this.checkedNodes1 = []
      this.dialogVisible3 = true
    },
    // 修改限销区域
    UpdateLimitSaleRegion (row) {
      this.ROW = row
      this.checkedNodes = []
      this.title = '修改限销区域'
      this.dialogVisible4 = true
    },
    // 修改区域&类型
    UpdateRegionOrType (row) {
      this.ROW = row
      this.checkedNodes = []
      this.title = '修改区域&类型'
      this.dialogVisible5 = true
    },
    // 删除 查看 行
    deleteInfoItem (row) {
      console.log(row)
      this.$modal.confirm('确认删除吗？').then(function () {
        return delLimitSale(row.id)
      }).then(() => {
        this.getRowItemInfo()
        this.$modal.msgSuccess("成功")
      })
    },

    handleSelectionChange3 (rows) {
      this.purchaserIds = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.purchaserIds.push(row.id)
          }
        });
      }
    },

    deleteSelected () {
      let that = this
      this.$modal.confirm('确认删除吗？').then(function () {
        return delLimitSale(that.purchaserIds + '')
      }).then(() => {
        this.getRowItemInfo()
        this.$modal.msgSuccess("成功")
      })
    },




    // 导入
    Import () {
      this.upload.open = true
      this.upload.title = '导入商品限销配置'
    },
    /** 下载模板操作 */
    importTemplate () {
      this.download(
        "/control/sale/importTemplate", {}, `限销商品导入模板_${this.parseTime(new Date().getTime(), "{y}{m}{d}_{h}{i}{s}")}.xlsx`
      );
    },
    // 提交上传文件
    submitFileForm () {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress (event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess (response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },

    // 获取列表  /  搜索
    getList () {
      getLimitSaleList(this.form).then(res => {
        if (res.code === 200) {
          this.limitSaleList = res.rows
          this.form.total = res.total
          this.loading = false
        }
      })
    },
    // 重置
    resetQuery () {
      this.form = {
        total: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },
    // 新建按钮
    newlyBuild () {
      this.title = '新建商品'
      this.dialogVisible1 = true
    },
    //  搜索 全部 商品
    goods_search () {
      allGoodsList(this.goodsForm).then(res => {
        if (res.code === 200) {
          this.goodsList = res.rows
          this.goodsForm.total = res.total
        }
      })
    },
    // 搜索 全部 客户
    purchaser_search () {
      this.loading1 = true
      allPurchaserList(this.purchaserForm).then(res => {
        if (res.code === 200) {
          this.loading1 = false
          this.purchaserList = res.rows
          this.purchaserForm.total = res.total
        }
      })
    },
    // 添加
    add (row) {
      if (this.title === '新建商品') {
        addLimitSale({ skuId: row.id }).then(res => {
          if (res.code === 200) {
            this.dialogVisible1 = false
            this.getList()
          }
        })
      }
      if (this.title === '修改客户') {
        let purchasers = []
        this.purchaserIds.forEach((item) => {
          purchasers.push(item.purchaserId)
        })
        updLimitSale(this.currentRow.id, { purchaserIds: purchasers + '' }).then(res => {
          if (res.code === 200) {
            this.dialogVisible2 = false
            this.getRowItemInfo()
            this.getList()
          }
        })
      }
      if (this.title === '客户') {
        let purchasers = []
        this.purchaserIds.forEach((item) => {
          purchasers.push(item.purchaserId)
        })
        updLimitSale(this.ROW.id, { skuId: this.ROW.skuId, purchaserIds: purchasers + '' }).then(res => {
          if (res.code === 200) {
            this.dialogVisible2 = false
            this.getList()
          }
        })
      }

      if (this.title === '修改客户类型') {
        updLimitSale(this.currentRow.id, { molds: this.purchaserTypeContent }).then(res => {
          if (res.code === 200) {
            this.dialogVisible3 = false
            this.getRowItemInfo()
            this.getList()
          }
        })
      }
      if (this.title === '客户类型') {
        updLimitSale(this.ROW.id, { skuId: this.ROW.skuId, molds: this.purchaserTypeContent }).then(res => {
          if (res.code === 200) {
            this.dialogVisible3 = false
            this.getList()
          }
        })
      }

      if (this.title === '修改限销区域') {
        updLimitSale(this.currentRow.id, { regions: this.administrative }).then(res => {
          if (res.code === 200) {
            this.checkedNodes = []
            this.dialogVisible4 = false
            this.getRowItemInfo()
            this.getList()
          }
        })
      }
      if (this.title === '限销区域') {
        updLimitSale(this.ROW.id, { skuId: this.ROW.skuId, regions: this.administrative }).then(res => {
          if (res.code === 200) {
            this.checkedNodes = []
            this.dialogVisible4 = false
            this.getList()
          }
        })
      }
      if (this.title === '修改区域&类型') {
        updLimitSale(this.ROW.id, { molds: this.purchaserTypeContent, regions: this.administrative }).then(res => {
          if (res.code === 200) {
            this.dialogVisible5 = false
            this.getRowItemInfo()
            this.getList()
          }
        })
      }
      if (this.title === '区域&类型') {
        updLimitSale(this.ROW.id, { skuId: this.ROW.skuId, molds: this.purchaserTypeContent, regions: this.administrative }).then(res => {
          if (res.code === 200) {
            this.dialogVisible5 = false
            this.getList()
          }
        })
      }
    },

    selects_all (selection) {
      if (selection.length === 0) {
        const ids = this.purchaserIds.map((i) => {
          return i.purchaserId
        })
        for (var i = 0; i < this.purchaserIds.length; i++) {
          if (ids.indexOf(this.purchaserIds[i].purchaserId) > -1) {
            this.purchaserIds.splice(i, 1)
            i--
          }
        }
      }
      const arr = [...selection, ...this.purchaserIds]
      this.purchaserIds = Array.from(new Set(arr))
    },
    toggleSelection () {
      this.$refs.multipleTable.clearSelection()
      this.purchaserIds = []
    },
    handleSelectionChange (rows) {
      this.purchaserIds = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.$set(row, 'name', row.purchaserName)
            this.purchaserIds.push(row)
          }
        });
        console.log(this.purchaserIds)
      }
    },

    // 客户
    purchaser (row) {
      this.ROW = row
      this.purchaserIds = []
      // 客户
      this.purchaserForm = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        paramMap: { applyStatus: 'EXPIRE,PASS' },
      }
      this.checkedNodes = []
      this.title = '客户'
      this.purchaserList = []
      this.dialogVisible2 = true
    },
    // 客户类型
    purchaserType (row) {
      this.ROW = row
      this.title = '客户类型'
      this.checkedNodes1 = []
      this.dialogVisible3 = true
    },
    // 选中 区域
    getChecked () {
      let nodesInfo = this.$refs.cascader.getCheckedNodes()
      // this.province = 0
      // this.city = 0
      // this.district = 0
      this.administrative = ''
      nodesInfo.forEach(i => {
        // this.administrative += i.data.id + ';'
        i.pathNodes.forEach(j => {
          this.administrative += j.value + ','
          //   if (j.level === 1) {
          //     this.province = j.value
          //   }
          //   if (j.level === 2) {
          //     this.city = j.value
          //   }
          //   if (j.level === 3) {
          //     this.district = j.value
          //   }
        })
        this.administrative = this.administrative.substring(0, this.administrative.length - 1)
        this.administrative += ';'
      })
    },
    // 类型
    getChecked1 () {
      let nodesInfo = this.$refs.cascader1.getCheckedNodes()
      let purchaserTypeContent = ''
      nodesInfo.forEach(i => {
        purchaserTypeContent += i.value + ','
      })
      this.purchaserTypeContent = purchaserTypeContent.slice(0, purchaserTypeContent.length - 1)
    },
    handleClose (row, type) {
      if (type === 'purchaserName') {
        updLimitSale(row.id, { resourceType: 'SKU', purchaserId: 0 }).then(res => {
          if (res.code === 200) this.getList()
        })
      }
      if (type === 'mold') {
        updLimitSale(row.id, { resourceType: 'SKU', mold: 0 }).then(res => {
          if (res.code === 200) this.getList()
        })
      }
    },

    // 区域 & 类型
    regionOrType (row) {
      this.ROW = row
      this.checkedNodes = []
      this.title = '区域&类型'
      this.dialogVisible5 = true
    },
    // 限销区域
    limitSaleRegion (row) {
      this.ROW = row
      this.checkedNodes = []
      this.title = '限销区域'
      this.dialogVisible4 = true
    },
    handleNodeClick (data) {
      console.log(data)
      if (data.level === 'province') {
        this.province = data.id
      }
      if (data.level === 'city') {
        this.city = data.id
      }
      if (data.level === 'district') {
        this.district = data.id
      }
    },
    // 删除选中
    deleteSelect () {
      this.open = true
      this.ROW = []
    },
    // 删除 限销列表行
    delLimitSaleRow (row) {
      this.ROW = row
      this.open = true
      this.skuIds = []
    },
    // 多选框选中数据
    handleSelectionChange2 (selection) {
      this.ids = selection.map(item => item.id);
      this.skuIds = selection.map(item => item.skuId);
      this.multiple = !selection.length;
    },
    determineDelete () {
      const csIds = this.ROW.id || this.ids
      delLimitSale(csIds).then(res => {
        if (res.code === 200) {
          this.open = false
          this.getList()
        }
      })
    },
    // 黑/白名单切换
    handleTypeChange (row) {
      let text = row.type === "RELEASE" ? "白名单" : "黑名单";
      this.$modal.confirm('确认切换为"' + text + '"吗？')
        .then(function () {
          return updateType(
            row.id,
            { type: row.type }
          );
        })
        .then(() => {
          this.$modal.msgSuccess('切换为' + text + "成功");
        })
        .catch(function () {
          row.type = row.type === "RELEASE" ? "PREVENT" : "RELEASE";
        });
    },
    /** 导出按钮操作 */
    handleExport () {
      const _this = this
      this.$modal.confirm('确认创建导出报表任务吗？')
        .then(function () {
          _this.download('control/sale/sku/export/task', {
            ..._this.addDateRangeWithMap(_this.form)
          }, `订单汇总_${_this.parseTime(new Date().getTime(), "{y}-{m}-{d}_{h}{i}{s}")}.xlsx`)
        })
    },
  }
}
</script>

<style lang="scss" scoped>
.limitSale_container {
  padding: 20px;
  .newlyBuild {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
::v-deep .moldStyle {
  span {
    display: inline-block;
    background: pink;
    margin: 0 5px 5px 0;
    padding: 2px 4px;
    color: #fff;
  }
}
.closables {
  display: contents;
}
::v-deep .el-dialog {
  top: 0;
  .search {
    padding-left: 20px;
    margin: 10px 0;
    .el-input {
      width: 200px;
      margin-right: 20px;
    }
  }
  .el-dialog__body {
    padding-top: 0;
    .purchaser_certified_mold {
      margin-left: 30px;
    }
  }
}
.purchaserIdsName {
  max-height: 100px;
  overflow: hidden;
  overflow-y: auto;
}

::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
  z-index: 1;
  right: 20px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
  z-index: 1;
  left: 20px;
}
/*显示文字*/
::v-deep .el-switch__label.is-active {
  display: block;
}
::v-deep .el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 55px;
}
</style>
